<template>
  <!-- 顶部菜单分类 -->
  <view class="menu-content-bottom">
    <!-- 顶部tabs滚动元素 -->
    <scroll-view
      class="top-tabs-scroll"
      scroll-x="true"
      :show-scrollbar="false"
      :scroll-left="scrollLeft"
      scroll-with-animation="true"
    >
      <view
        class="menu-item-tabs"
        v-for="(item, index) in topNavList"
        :key="index"
        :class="index == activeMenuIndex ? 'active' : ''"
        @click="activeMenuFn(item.code, index)"
      >
        <text class="tabs-text">{{ item.name }}</text>
      </view>
      <view
        class="slider-style"
        :style="{ left: sliderLeft + 'px', transition: transition + 's' }"
      ></view>
    </scroll-view>

    <!-- 底部模板展示 轮播 -->
    <swiper
      class="swiper"
      :duration="200"
      :current="activeMenuIndex"
      @transition="transitionFn"
      @animationfinish="animationfinishFn"
    >
      <swiper-item v-for="(item, index) in topNavList" :key="index">
        <!-- <view class="loading" v-if="index == activeMenuIndex - 1"
            >加载中...</view
          > -->
        <component :is="item.componentName"></component>
        <!-- <view class="loading" v-if="index == activeMenuIndex + 1"
            >加载中...</view
          > -->
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
// 页面介绍：菜单页面
// 右侧箭头点击打开的整体菜单，左侧是页面分类，右侧是分类下的页面展示
import { defineComponent } from "vue";
import { myMixin } from "./mixins";
export default defineComponent({
  name: "顶部nav导航",
  props: {
    topNavList: {
      type: Array,
      default: () => [
        {
          name: "登录", //顶部nav的名称
          componentName: "loginMenu", //组件名称（全局注册组件时才可以直接传递名称，单页面引入时需要转递组件本身）
        },
        {
          name: "面板",
          componentName: "panelMenu",
        },
        {
          name: "列表",
          componentName: "listMenu",
        },
        {
          name: "滚动",
          componentName: "hstabMenu",
        },
        {
          name: "搜索",
          componentName: "searchMenu",
        },
        {
          name: "用户信息",
          componentName: "userMenu",
        },
        {
          name: "选项卡",
          componentName: "tabMenu",
        },
        {
          name: "布局",
          componentName: "layoutMenu",
        },
        {
          name: "展示",
          componentName: "boothMenu",
        },
        {
          name: "顶部导航",
          componentName: "topNavMenu",
        },
        {
          name: "选项设置",
          componentName: "setOptionsMenu",
        },
      ],
    },
  },
  setup(props, context) {
    const mixin = myMixin(props);
    return {
      ...mixin,
    };
  },
});
</script>

<style scoped lang="less">
.menu-content-bottom {
  height: calc(100% - 240rpx);
  .top-tabs-scroll {
    position: relative;
    white-space: nowrap;
    width: 100%;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #ddd;
    box-sizing: border-box;
    height: 80rpx;
    .menu-item-tabs {
      display: inline-block;
      font-size: 28rpx;
      font-weight: 300;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      padding: 0 20rpx;
      position: relative;
      overflow: hidden;
      .tabs-text {
        transition: 0.3s;
      }

      &.active {
        .tabs-text {
          display: block;
          // 缩放
          transform: scale(1.2);
          font-weight: 700;
        }
      }
    }
    .slider-style {
      position: absolute;
      bottom: 0rpx;
      width: 40rpx;
      height: 4rpx;
      background: rgb(0, 0, 0);
      // transition: 0.3s;
    }
  }
  .swiper {
    height: 100% !important;
    bottom: 0 !important;
    padding: 0 !important;
    .loading {
      height: 80%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #aaa;
    }
  }
}
</style>
